<template>
  <div>
    <h1>AQI 数据列表</h1>
    <button @click="fetchAqiData">获取 AQI 数据</button>
    <ul v-if="aqiData.length > 0">
      <li v-for="item in aqiData" :key="item.aqiId">
        {{ item.aqiExplain }} - {{ item.color }}
      </li>
    </ul>
  </div>
</template>

<script>
import { listAqiAll } from '@/services/aqiService';

export default {
  data() {
    return {
      aqiData: [],
    };
  },
  methods: {
    async fetchAqiData() {
      try {
        this.aqiData = await listAqiAll();
      } catch (error) {
        alert('获取 AQI 数据失败：' + error.message);
      }
    },
  },
};
</script>